<template>
    <div class="bgcs">

        <div class="yaowenalls" v-for="item in listgroup" :key="item.id">
            <div class="sss">
                <div class="centerss">

                    <div class="titles"> {{item.title}}</div>

                    <div class="wanbaos"><span>{{item.address}}</span> <span>{{item.num}}</span> </div>

                </div>
            </div>

            <img :src="item.img" alt="" class="shows">

        </div>

        <div>
            <div class="new">全新福特探险者现已上市</div>
            <img src="https://nimg.ws.126.net/?url=https%3A%2F%2Fyt-adp.ws.126.net%2Fzhangmaoling%2F1014507_acss_20220907.jpg&thumbnail=750x2147483647&quality=85&type=jpg"
                alt="" class="fute">
        </div>
    </div>

</template>


<script setup>
import { onMounted, defineProps, toRefs, reactive } from 'vue';
import { gettui } from '../api/getlogin'

const list = defineProps({ title: String })

let listgroup = reactive([])

onMounted(async () => {
    const { data: res } = await gettui();
    res.forEach(e => {
        listgroup.push(e)
    });


})



</script>
 


<style scoped="less">
.titles {
    width: 10rem;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-align: left;
}

.yaowenalls {
    display: flex;
    justify-content: space-around;

}

.shows {
    width: 10rem;
    height: 6rem;
}

.centerss {
    display: flex;
    flex-direction: column;
}

.wanbaos {
    color: #999;
    font-size: .32rem;
    display: flex;
    margin-top: 0.5rem;
    margin-left: -0.48rem;
}

/* .wanbaos span {
    margin-left: 0.5rem;
}

.wanbaos span:nth-child(2) {
    margin-left: 2rem;
} */

.sss {
    display: flex;
    flex-direction: row;
}

.fute {
    width: 100vw;
}

.new {
    text-align: left;
    margin-left: 0.5rem;
}
</style>